<template>
    <div class="deparmentModal">
        <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" title="创建" style="width:50%"
           :on-after-leave="cancelCallback" >
            <div class="cotent">
                <n-form ref="formRef" :model="fromData" :rules="rules" label-placement="left">
                    <n-form-item label="上级部门" path="createData.departmentTop">
                        <n-cascader :options="topOptions" placeholder="请选择部门" label-field="deptName"
                            :check-strategy="checkStrategy" value-field="_id" children-field="children"
                            :default-value="deprtId" v-model:value="fromData.createData.departmentTop"
                            @update:value="handleUpdateValue" />
                    </n-form-item>
                    <n-form-item label="部门名称" path="createData.deptName">
                        <n-input placeholder="请输入" v-model:value="fromData.createData.deptName" clearable />
                    </n-form-item>
                    <n-form-item label="负责人" path="createData.userId">
                        <n-select filterable placeholder="请选择"  v-model:value="fromData.createData.userId" :options="personSelect"
                            @update:value="getOptionSelect" />
                    </n-form-item>
                    <n-form-item label="负责人邮箱" path="createData.userEmail">
                        <n-input placeholder="请输入" v-model:value="fromData.createData.userEmail" disabled />
                    </n-form-item>
                </n-form>
            </div>
            <template #action>
                <n-space>
                    <n-button @click="cancelCallback">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="submitCallback">确定</n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted, onBeforeMount } from 'vue'
import { deptsOperate, deprtList } from '../../../../api/dept'
import { userList } from '../../../../api/user'
import { useMessage } from 'naive-ui'
const message = useMessage()
export default {
    setup(props, { emit }) {
        const state = reactive({
            showModal: false,
            formBtnLoading: false, //Loading
            // 表单验证
            rules: {
                createData: {
                    deptName: {
                        required: true,
                        message: "请输入角色名",
                        trigger: 'blur',
                    },

                    departmentTop: {
                        required: true,
                        message: "请输选择上级部门",
                        trigger: 'blur',
                    },
                    userId: {
                        required: true,
                        message: "请选择负责",
                        trigger: 'blur',
                    },
                    userEmail: {
                        required: false,
                        message: "请选择负责",
                        trigger: 'blur',
                    }
                }
            },
            topOptions: [],  //上级部门
            personSelect: [],
            action: '', //弹窗类型
            checkStrategy: 'all',
            deprtId: ''
        })
        onBeforeMount(() => {
            //责任人
            userList({}).then(res => {
                let data = []
                res.data.forEach((element, i) => {
                    data.push({ label: element.usename, value: element.userid, userEmail: element.userEmail })
                });
                state.personSelect = data
            })
            //部门  
            deprtList({}).then(res => {
                console.log('==========',res)
                state.topOptions = res
            })
        })
        const createvalue = ref({
            createData: {
                deptName: '',
                departmentTop: '',
                userId: '',
                userEmail: '',
                action: '',
                userName: '',
                parentId: [null],  //父id
            }
        })
        const methods = reactive({
            createDepart(item) {
                state.showModal = true
                state.action = item.action
                if (item.action == 'edit') {
                    createvalue.value.createData['_id'] = item._id
                    createvalue.value.createData = item.value
                    createvalue.value.createData.parentId = item.value.parentId
                    state.deprtId = item._id
                    createvalue.value.createData.departmentTop = item._id
                    return
                }
            },
            //取消
            cancelCallback() {
                // @ts-ignore
                createvalue.value.createData = {}
                 state.deprtId = ''
                state.showModal = false
            },
            //    确定
            submitCallback() {
                delete createvalue.value.createData.departmentTop
                if (state.action == 'create') {
                    createvalue.value.createData.action = 'create'
                    deptsOperate(createvalue.value.createData).then(res => {
                        message.success('创建成功')
                        state.showModal = false
                        emit('addUserClear', '')
                        // @ts-ignore
                        createvalue.value.createData = {}
                        state.deprtId = ''
                    })
                }
                if (state.action == 'edit') {
                    createvalue.value.createData.action = 'edit'
                    deptsOperate(createvalue.value.createData).then(res => {
                        message.success('修改成功')
                        emit('addUserClear', '')
                        state.showModal = false
                        // @ts-ignore
                        createvalue.value.createData = {}
                        state.deprtId = ''
                    })
                    return
                }

            },
            //下拉框回调
            getOptionSelect(item, option) {
                createvalue.value.createData.userId = item
                createvalue.value.createData.userEmail = option.userEmail
                createvalue.value.createData.userName = option.label
            },
            //部门选择回调
            handleUpdateValue(item, option) {
                item == 'xianglan' ? createvalue.value.createData.parentId = [null] : createvalue.value.createData.parentId = [item]
            }
        })

        return {
            fromData: createvalue,
            ...toRefs(state),
            ...toRefs(methods)
        }
    },
}
</script>
<style lang="scss">
</style>